[JavaScript] 關於模組化、匯入、匯出

把一坨的 JavaScript 拆分成可以不同的模組，可以方便之後的管理與使用～

建立自己的 module 模組

方法一

let obj = {
    double: function(n) {
        return n * 2
    },
    triple: function(n) {
        return n * 3
    }
}
module.exports = obj;

方法二

let obj = {
    double: function(n) {
        return n * 2
    },
    triple: function(n) {
        return n * 3
    }
}
exports.double = obj.double
exports.triple = obj.triple
// exports 相當於一個空物件

輸出 module

function double(n){
    return n * 2
}
module.export = double

引入內建的 module

const os = require('os')
console.log(os.platform())

引入自己建立的 module

const doubleAndTriple = require('./utils/myModule')
console.log(doubleAndTriple.double(2))
console.log(doubleAndTriple.triple(2))
//常用的 function 可以放在 utils 的資料夾內，供日後管理及使用

ES6 的 import export

具名匯出

//匯出
export function add(a, b) {
    return a + b
}
export const PI = 3.14

//匯入
import {add, PI} from './utils'

//匯出
function add(a, b) {
    return a + b
}
const PI = 3.14

export {
    add as addFunction,
    PI
}

//匯入
import {addFunction, PI} from './utils'

預設匯出

export default function add(a, b) {
    return a + b
}

export const PI = 3.14
----------------------
import add, {PI} from './utils.js'

怎麼決定要用哪種匯出

Export Default（預設匯出）：一個檔案只能有一個

• 大多用在開發上
• 若想要一次全部匯入的話，可以

    import * as all from './module.js';
  

Export Named（具名）：一個檔案可以有很多個

• 大多用在函式庫（框架、套件）
• 一次只取出一個內容
  

Bable

用來轉換成舊的可識別的語法，例如 node 並不支援 export 和 import，就要用 bable 來操作

1. 安裝必要套件：npm install --save-dev @babel/core @babel/node @babel/preset-env
2. 新增 .babelrc
3. 填入內容，告訴 babel 要用這個 preset：

   {
   "presets": ["@babel/preset-env"]
   }
   

4. 最後使用 npx babel-node 執行即可

參考資料：
完全解析 JavaScript import、export